<template>
  <div style="padding-bottom:40px;padding-top:20px" v-if="zfNameflag">
    <div style="padding:0px 20px;">
      <parklist :getParkCodeOnly="parkChange" :getParkNameMap="getParkName"></parklist>
    </div>
    <!-- 3 -->
    <div class="subject">
      <div class="tab" style="margin-top: 0px;">

        <div class="Unit">
          <div class="Unit-title">隐患数量</div>
          <div style="margin-bottom: 20px;">
            <el-button-group>
              <el-button @click="dangerTypeChange('')" size="small" :class="dangerType===''?'primaryButton':''">全部</el-button>
              <el-button @click="dangerTypeChange('0')" size="small" :class="dangerType==='0'?'primaryButton':''">重大隐患</el-button>
              <el-button @click="dangerTypeChange('1')" size="small" :class="dangerType==='1'?'primaryButton':''">较大隐患</el-button>
              <el-button @click="dangerTypeChange('2')" size="small" :class="dangerType==='2'?'primaryButton':''">严重隐患</el-button>
              <el-button @click="dangerTypeChange('3')" size="small" :class="dangerType==='3'?'primaryButton':''">一般隐患</el-button>
            </el-button-group>
            <!-- <el-button-group style="float: right;">
              <el-button @click="dangerDateChange('1')" size="small" :class="dangerDate==='1'?'primaryButton':''">年</el-button>
              <el-button @click="dangerDateChange('2')" size="small" :class="dangerDate==='2'?'primaryButton':''">月</el-button>
            </el-button-group> -->
            <el-date-picker
              style="width:140px;color:#fff;float: right;"
              size="small"
              v-model="dangerMonth"
              type="month"
              :picker-options="pickerOptions"
              :clearable="false"
              :editable="false"
              value-format="yyyyMM"
              @change="dangerMonthChange"
              placeholder="请选择时间">
            </el-date-picker>
          </div>
          <div class="warnControll_charts">
            <el-table :data="parkPotentialDanger"
                class="customer-table"
                :row-style="{height:'32px'}"
                :cell-style="addclass"
                style="width: 100%"
                height="360px"
                :header-cell-style="{background:'#F7F8FA', color: '#333333'}"
                @cell-click="potentialDangerClick">
              <el-table-column type="index" :index="indexMethod" label="排名" width="70px"></el-table-column>
              <el-table-column prop="name" label="园区名称">
                <template scope="scope">
                  <el-tooltip class="item" effect="dark" :content="getNameByAbbreviation(scope.row.name)" placement="top-start">
                    <span>{{scope.row.name}}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="count" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="隐患数"></el-table-column>
              <el-table-column prop="rectifiedCount" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="已整改"></el-table-column>
            </el-table>
          </div>
        </div>

        <div class="Unit">
          <div class="Unit-title">风险管控</div>
          <div style="margin-bottom: 20px;">
            <el-date-picker
              style="width:140px;color:#fff;"
              size="small"
              v-model="riskMonth"
              type="month"
              :picker-options="pickerOptions"
              :clearable="false"
              :editable="false"
              value-format="yyyyMM"
              @change="riskMonthChange"
              placeholder="请选择时间">
            </el-date-picker>
          </div>
          <div class="Unit-tab">
            <div style="padding-left: 10px;margin-top:33px">
              <div style="display: inline-block; margin-right:10px">
                <span style="display: inline-block;width:18px;height:12px;background-color: #FF6B00;margin-left:5px;border-radius:2px;"></span>
                <span style="margin-left:5px; font-size: 14px; color: #666666">重大风险</span>
              </div>
              <div style="display: inline-block; margin-right:10px">
                <span style="display: inline-block;width:18px;height:12px;background-color: #FFC000;margin-left:5px;border-radius:2px;"></span>
                <span style="margin-left:5px; font-size: 14px; color: #666666">较大风险</span>
              </div>
              <div style="display: inline-block; margin-right:10px">
                <span style="display: inline-block;width:18px;height:12px;background-color: #1492FF;margin-left:5px;border-radius:2px;"></span>
                <span style="margin-left:5px; font-size: 14px; color: #666666">一般风险</span>
              </div>
              <div style="display: inline-block;">
                <span style="display: inline-block;width:18px;height:12px;background-color: #70AD47;margin-left:5px;border-radius:2px;"></span>
                <span style="margin-left:5px; font-size: 14px; color: #666666">低风险</span>
              </div>
            </div>
            <div class="majorHazardAnalysis_charts">
              <div id="annular1" ref="annular1" style="width:100%;height:370px"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 4 -->
    <div class="subject">
      <div class="tab">
        <div class="Unit">
          <div class="Unit-title">实时报警</div>
          <div class="warnControll_charts" style="padding-bottom: 38px;">
            <el-table :data="realtimeAlarm"
                class="customer-table"
                :row-style="{height:'32px'}"
                :cell-style="{padding:'0px'}"
                style="width: 100%"
                height="370px"
                :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
              <el-table-column type="index" :index="indexMethod" label="排名" width="70px"></el-table-column>
              <el-table-column prop="entName" :show-overflow-tooltip="true" label="企业名称"></el-table-column>
              <el-table-column prop="alarmTypeName" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="报警因子"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="Unit">
          <div class="Unit-title">报警排名</div>
          <div style="margin-bottom: 20px;">
            <el-date-picker
              style="width:140px;color:#fff;"
              size="small"
              v-model="alarmMonth"
              type="month"
              :picker-options="pickerOptions"
              :clearable="false"
              :editable="false"
              value-format="yyyyMM"
              @change="alarmMonthChange"
              placeholder="请选择时间">
            </el-date-picker>
          </div>
          <div class="warnControll_charts" style="padding-bottom: 38px;">
            <el-table :data="alarmRanking"
                class="customer-table"
                :row-style="{height:'32px'}"
                :cell-style="addclass"
                style="width: 100%"
                height="370px"
                :header-cell-style="{background:'#F7F8FA', color: '#333333'}"
                @cell-click="alarmRankingClick">
              <el-table-column type="index" :index="indexMethod" label="排名" width="70px"></el-table-column>
              <el-table-column prop="nameAbbreviation" label="园区名称">
                <template scope="scope">
                  <el-tooltip class="item" effect="dark" :content="getNameByAbbreviation(scope.row.nameAbbreviation)" placement="top-start">
                    <span>{{scope.row.nameAbbreviation}}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="proportion" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="报警数占比"></el-table-column>
              <el-table-column prop="alarmCount" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="报警数"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <!-- 2 -->
    <div class="securitybottom" style="margin-top: 20px;">
      <div style="display: flex;">
        <div style="margin-right: 1.4%;margin-left: 1.4%;width:31.9%">
          <div class="warnControll">
            <div class="safePersonCount_title">
              <span class="title_sty">危险作业</span>
            </div>
            <div style="margin-bottom: 20px;margin-left: 40px;">
              <el-date-picker
                style="width:140px;color:#fff;"
                size="small"
                v-model="jobMonth"
                type="month"
                :picker-options="pickerOptions"
                :clearable="false"
                :editable="false"
                value-format="yyyyMM"
                @change="jobMonthChange"
                placeholder="请选择时间">
              </el-date-picker>
            </div>
            <div class="warnControll_charts">
              <el-table :data="ParkGroupEmergencyJob"
                  class="customer-table"
                  :row-style="{height:'32px'}"
                  :cell-style="addclass"
                  style="width: 100%"
                  height="330px"
                  :header-cell-style="{background:'#F7F8FA', color: '#333333'}"
                  @cell-click="emergencyJobClick">
                <el-table-column type="index" :index="indexMethod" label="排名" width="70px"></el-table-column>
                <el-table-column prop="nameAbbreviation" label="园区名称">
                  <template scope="scope">
                    <el-tooltip class="item" effect="dark" :content="getNameByAbbreviation(scope.row.nameAbbreviation)" placement="top-start">
                      <span>{{scope.row.nameAbbreviation}}</span>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column prop="count" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="次数"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div style="margin-right: 1.4%;width:31.9%">
          <div class="warnControll">
            <div class="safePersonCount_title">
              <span class="title_sty">安全风险指数</span>
            </div>
            <div style="margin-bottom: 20px;margin-left: 40px;">
              <el-date-picker
                style="width:140px;color:#fff;"
                size="small"
                v-model="safetyMonth"
                type="month"
                :picker-options="pickerOptions"
                :clearable="false"
                :editable="false"
                value-format="yyyyMM"
                @change="safetyMonthChange"
                placeholder="请选择时间">
              </el-date-picker>
            </div>
            <div class="warnControll_charts">
              <el-table :data="safetyRisk"
                  class="customer-table"
                  :row-style="{height:'32px'}"
                  :cell-style="{padding:'0px'}"
                  style="width: 100%"
                  height="330px"
                  :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
                <el-table-column type="index" :index="indexMethod" label="排名" width="70px"></el-table-column>
                <el-table-column prop="parkName" label="园区名称">
                  <template scope="scope">
                    <el-tooltip class="item" effect="dark" :content="getNameByAbbreviation(scope.row.parkName)" placement="top-start">
                      <span>{{scope.row.parkName}}</span>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column prop="safetyRisk" :formatter="formatCount" align="center" :show-overflow-tooltip="true" label="指数"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div style="margin-right: 1.4%;width:31.9%">
          <div class="warnControll">
            <div class="safePersonCount_title">
              <span class="title_sty">安全通告</span>
            </div>
            <div class="warnControll_charts">
              <el-table :data="ParkAccidentReport"
                  class="customer-table"
                  :row-style="{height:'32px'}"
                  :cell-style="{padding:'0px'}"
                  style="width: 100%"
                  height="370px"
                  :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
                <el-table-column type="index" :index="indexMethod" label="序号" width="70px"></el-table-column>
                <el-table-column prop="accidentnmae" :show-overflow-tooltip="true" label="通告内容">
                  <template scope="scope">
                    <span style="color: #1492FF" @click="showDetail(scope.row)">{{scope.row.accidentnmae}}</span>
                  </template>
                </el-table-column>
              </el-table>
              <el-dialog
                title="安全通告详情"
                :visible.sync="dialogVisible"
                width="42%"
                center>
                <el-row style="font-size: 16px;color: #333333;font-weight: 700">{{accidentDetail.accidentnmae}}</el-row>
                <el-row style="margin-top:10px">
                  <el-col :span="4" style="background:#1492FF;color: #FFFFFF;padding:4px;text-align:center;font-size: 14px">{{accidentDetail.accidentlevel}}</el-col>
                  <el-col :span="19" :offset="1" style="margin-top:4px;font-size: 16px;color: #666666;">{{accidentDetail.nameAbbreviation}}/{{accidentDetail.entName}}</el-col>
                </el-row>
                <el-row style="margin-top:40px">
                  <el-col :span="4" style="color: #666666;font-size: 16px">事故描述：</el-col>
                  <el-col :span="19" :offset="1" style="color: #333333;font-size: 16px">{{accidentDetail.describes}}</el-col>
                </el-row>
                <el-row style="margin-top:30px">
                  <el-col :span="4" style="color: #666666;font-size: 16px">事故原因：</el-col>
                  <el-col :span="19" :offset="1" style="color: #333333;font-size: 16px">{{accidentDetail.accidentreason}}</el-col>
                </el-row>
                <el-row style="margin-top:30px">
                  <el-col :span="4" style="color: #666666;font-size: 16px">事故分析：</el-col>
                  <el-col :span="19" :offset="1" style="color: #333333;font-size: 16px">{{accidentDetail.accidentanalyse}}</el-col>
                </el-row>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">关闭</el-button>
                </span>
              </el-dialog>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogTableVisible" :title="dialogTitle" center>
      <el-table :data="gridData"
          class="customer-table"
          :row-style="{height:'32px'}"
          :cell-style="{padding:'0px'}"
          style="width: 100%;margin-bottom: 20px;"
          height="370px"
          :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
        <!-- <el-table-column property="nameAbbreviation" :show-overflow-tooltip="true" label="园区名称"></el-table-column> -->
        <el-table-column v-if="detailPartType === 'alarmRanking' || detailPartType === 'emergencyJob'" property="entName" :show-overflow-tooltip="true" label="企业名称"></el-table-column>
        <el-table-column v-if="detailPartType === 'alarmRanking'" property="alarmTypeName" :show-overflow-tooltip="true" label="报警类型"></el-table-column>
        <el-table-column v-if="detailPartType === 'emergencyJob'" property="jobName" :show-overflow-tooltip="true" label="作业名称"></el-table-column>
        <el-table-column v-if="detailPartType === 'emergencyJob'" property="dangerLevel" :show-overflow-tooltip="true" label="危险级别"></el-table-column>
        <el-table-column v-if="detailPartType === 'potentialDanger'" property="potentialName" :show-overflow-tooltip="true" label="隐患名称"></el-table-column>
        <el-table-column v-if="detailPartType === 'potentialDanger'" property="potentialLevel" :show-overflow-tooltip="true" label="隐患级别"></el-table-column>
        <el-table-column v-if="detailPartType === 'potentialDanger'" property="potentialStatus" :show-overflow-tooltip="true" label="隐患状态"></el-table-column>
        <el-table-column property="createdAt" :show-overflow-tooltip="true" label="事件时间" width="200px"></el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="limit"
        background
        layout="prev, pager, next"
        :total="total"
        style="text-align: center;">
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import parklist from '@/components/parklist'
import dd from 'gdt-jsapi';
import * as echarts from 'echarts'
export default {
  components: { parklist },
  data () {
    return {
      parkNameMap: new Map(),
      dialogTitle: '',
      total: 0,
      limit: 10,
      page: 1,
      detailParkCode: '',
      detailPotentialStatus: '',
      detailPartType: '',
      gridData: [],
      dialogTableVisible: false,
      dialogVisible: false,
      accidentDetail: {
        accidentnmae: '',
        nameAbbreviation: '',
        entName: '',
        describes: '',
        accidentreason: '',
        accidentlevel: '',
        accidentanalyse: ''
      },
      dangerType: '', // 园区隐患等级类型
      // dangerDate: '1', // 园区隐患时间类型
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() > new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)
        }
      },

      dangerMonth: '',
      riskMonth: '',
      alarmMonth: '',
      jobMonth: '',
      safetyMonth: '',

      myChart1: {},
      option1: {},
      option1XData: ['重大风险', '较大风险', '一般风险', '低风险'],
      option1Data: [],
      zfNameflag: true,

      ParkGroupEmergencyJob: [], // 危险作业排名
      ParkAccidentReport: [], // 安全通告
      parkPotentialDanger: [], // 园区隐患
      realtimeAlarm: [], // 实时报警
      alarmRanking: [], // 报警排名
      safetyRisk: [] // 安全风险指数
    }
  },
  // created () {
  //   console.log(dd);
  //   if (dd !== undefined) {
  //     dd.getAuthCode({}).then(res =>{
  //       if (res) {
  //         let params = {
  //           applicationFlag: '20',
  //           authCode: res.auth_code
  //         }
  //         this.$http.post(`/home/sys/loginfree/authentication`, params)
  //           .then(({ data: res }) => {
  //             console.log('res2:',res);
  //             this.$store.commit('zfName', res.data.lastName)
  //             if (res.code !== 0) {
  //               this.zfNameflag = false
  //             }
  //           }).catch(() => {
  //             this.zfNameflag = false
  //           })
  //       }
  //     }).catch(() => {
  //       this.zfNameflag = false
  //     })
  //   } else {
  //     this.$message.error('请在浙政钉环境下浏览该页面！');
  //   }
  // },
  mounted () {
    this.initDate()
    this.getData()
  },
  methods: {
    getParkName (map) {
      this.parkNameMap = map
    },
    getNameByAbbreviation (key) {
      return this.parkNameMap.get(key)
    },
    // 切换园区
    parkChange (data) {
      this.$http.get(`/home/chemical/parkInfo/selectParkAll`, {}
      ).then(({ data: res }) => {
        res.data.forEach(item => {
          if (item.code === data) {
            sessionStorage.setItem('routeName1', item.nameAbbreviation)
            this.$router.push({
              name: 'zfSafetyProductionDetail',
              query: {
                data: data
              }
            })
          }
        })
      })
    },
    initDate () {
      let today = new Date()
      let year = today.getFullYear() + ''
      let month = today.getMonth() + 1
      month = month < 10 ? '0' + month : '' + month
      this.dangerMonth = year + month
      this.riskMonth = year + month
      this.alarmMonth = year + month
      this.jobMonth = year + month
      this.safetyMonth = year + month
    },
    addclass (value) {
      if (value.column.label === '隐患数' || value.column.label === '已整改' || value.column.label === '报警数' || value.column.label === '次数') {
        return { color: '#1492FF', padding: '0px' }
      } else {
        return { padding: '0px' }
      }
    },
    formatCount (row, column, cellValue, index) {
      if (cellValue && cellValue !== '' && cellValue !== '0.00%' && cellValue !== 'NaN%') {
        return cellValue
      } else {
        return '—'
      }
    },
    getData () {
      this.$http.post(`/home/chemical/parkInfo/getSafetyProductionInfo`,
        {
          timeOptions: '2',
          potentialLevel: this.dangerType
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.ParkGroupEmergencyJob = res.data.ParkGroupEmergencyJob
          this.ParkAccidentReport = res.data.ParkAccidentReport
          this.parkPotentialDanger = res.data.parkPotentialDanger[0]
          this.realtimeAlarm = res.data.realtimeAlarm

          let alarmTotal = res.data.alarmRanking.reduce(
            (acc, current) => acc + current.alarmCount, 0
          )
          res.data.alarmRanking.forEach((item) => {
            this.alarmRanking.push({
              nameAbbreviation: item.nameAbbreviation,
              alarmCount: item.alarmCount,
              parkCode: item.parkCode,
              proportion: ((item.alarmCount / alarmTotal) * 100).toFixed(2) + '%'
            })
          })
          this.safetyRisk = res.data.SafetyRisk

          this.option1Data = res.data.riskPointCount[0]
          this.renderMyChart1()
        }
      })
    },
    // 风险管控echarts初始化
    renderMyChart1 () {
      this.myChart1 = echarts.init(document.getElementById('annular1'))
      this.option1 = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '5%',
          top: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.option1XData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.option1Data,
            type: 'bar',
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorlist = ['#FF6B00', '#FFC000', '#1492FF', '#70AD47']
                  return colorlist[params.dataIndex]
                }
              }
            }
          }
        ]
      }
      this.myChart1.setOption(this.option1)
    },
    indexMethod (index) {
      return index + 1
    },
    dangerTypeChange (type) {
      this.dangerType = type
      this.$http.post(`/home/chemical/parkInfo/getPotentialDangerByDate`,
        {
          year: '',
          yearMonth: this.dangerMonth,
          potentialLevel: this.dangerType
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.parkPotentialDanger = res.data
        }
      })
    },
    // dangerDateChange (type) {
    //   this.dangerDate = type
    //   this.$http.post(`/home/chemical/parkInfo/getDangerByPotentialLevel`,
    //     {
    //       timeOptions: this.dangerDate,
    //       potentialLevel: this.dangerType
    //     }
    //   ).then(({ data: res }) => {
    //     if (res.code === 0) {
    //       this.parkPotentialDanger = res.data.parkPotentialDanger[0]
    //     }
    //   })
    // },
    showDetail (name) {
      this.accidentDetail = { ...name }
      this.dialogVisible = true
    },
    // 园区隐患
    dangerMonthChange () {
      this.$http.post(`/home/chemical/parkInfo/getPotentialDangerByDate`,
        {
          year: '',
          yearMonth: this.dangerMonth,
          potentialLevel: this.dangerType
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.parkPotentialDanger = res.data
        }
      })
    },
    // 风险管控
    riskMonthChange () {
      this.$http.post(`/home/chemical/parkInfo/getRiskPointByDate`,
        {
          year: '',
          yearMonth: this.riskMonth
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.option1Data = res.data[0]
          this.option1.series[0].data = this.option1Data
          this.myChart1.setOption(this.option1)
        }
      })
    },
    // 报警排名
    alarmMonthChange () {
      this.$http.post(`/home/chemical/parkInfo/getAlarmRankingByDate`,
        {
          year: '',
          yearMonth: this.alarmMonth
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.alarmRanking = []
          let alarmTotal = res.data.reduce(
            (acc, current) => acc + current.alarmCount, 0
          )
          res.data.forEach((item) => {
            this.alarmRanking.push({
              nameAbbreviation: item.nameAbbreviation,
              alarmCount: item.alarmCount,
              parkCode: item.parkCode,
              proportion: ((item.alarmCount / alarmTotal) * 100).toFixed(2) + '%'
            })
          })
        }
      })
    },
    // 危险作业
    jobMonthChange () {
      this.$http.post(`/home/chemical/parkInfo/getEmergencyJobByDate`,
        {
          year: '',
          yearMonth: this.jobMonth
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.ParkGroupEmergencyJob = res.data
        }
      })
    },
    // 安全风险指数
    safetyMonthChange () {
      this.$http.post(`/home/chemical/parkInfo/getSafetyRiskByDate`,
        {
          year: '',
          yearMonth: this.safetyMonth
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.safetyRisk = res.data
        }
      })
    },
    potentialDangerClick (row, column, cell, event) {
      this.page = 1
      this.gridData = []
      this.dialogTitle = row.name + '隐患数量'
      this.dialogTableVisible = true
      this.detailParkCode = row.parkCode
      this.detailPartType = 'potentialDanger'
      this.detailPotentialStatus = column.label === '已整改' ? '1' : '0'
      this.$http.post(`/home/chemical/parkInfo/getPotentialDangerDetailByDate`,
        {
          year: '',
          yearMonth: this.dangerMonth,
          parkCode: row.parkCode,
          limit: this.limit,
          page: this.page,
          potentialLevel: this.dangerType,
          potentialStatus: this.detailPotentialStatus
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.gridData = res.data.data.data.map(item => {
            return {
              potentialName: item.potentialName,
              createdAt: item.createTime,
              nameAbbreviation: item.name,
              potentialStatus: item.potentialStatus === 0 ? '未整改' : item.potentialStatus === 1 ? '已整改' : item.potentialStatus === 2 ? '已验收' : '',
              potentialLevel: item.potentialLevel === 0 ? '重大隐患' : item.potentialLevel === 1 ? '较大隐患' : item.potentialLevel === 2 ? '严重隐患' : item.potentialLevel === 3 ? '一般隐患' : ''
            }
          })
          this.total = Number(res.data.data.count)
        }
      })
    },
    alarmRankingClick (row, column, cell, event) {
      this.page = 1
      this.gridData = []
      this.dialogTitle = row.nameAbbreviation + '报警排名'
      this.dialogTableVisible = true
      this.detailParkCode = row.parkCode
      this.detailPartType = 'alarmRanking'
      this.$http.post(`/home/chemical/parkInfo/getAlarmRankingDetailByDate`,
        {
          year: '',
          yearMonth: this.alarmMonth,
          parkCode: row.parkCode,
          limit: this.limit,
          page: this.page
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.gridData = res.data.data.data
          this.total = Number(res.data.data.count)
        }
      })
    },
    emergencyJobClick (row, column, cell, event) {
      this.page = 1
      this.gridData = []
      this.dialogTitle = row.nameAbbreviation + '危险作业'
      this.dialogTableVisible = true
      this.detailParkCode = row.parkCode
      this.detailPartType = 'emergencyJob'
      this.$http.post(`/home/chemical/parkInfo/getEmergencyJobDetailByDate`,
        {
          year: '',
          yearMonth: this.jobMonth,
          parkCode: row.parkCode,
          limit: this.limit,
          page: this.page
        }
      ).then(({ data: res }) => {
        if (res.code === 0) {
          this.gridData = res.data.data.data.map(item => {
            return {
              jobName: item.jobName,
              createdAt: item.createTime,
              nameAbbreviation: item.nameAbbreviation,
              dangerLevel: item.dangerLevel === 0 ? '特级作业' : item.dangerLevel === 1 ? '一级作业' : item.dangerLevel === 2 ? '二级作业' : '',
              entName: item.entName
            }
          })
          this.total = Number(res.data.data.count)
        }
      })
    },
    handleCurrentChange (val) {
      this.page = val
      if (this.detailPartType === 'potentialDanger') {
        this.$http.post(`/home/chemical/parkInfo/getPotentialDangerDetailByDate`,
          {
            year: '',
            yearMonth: this.dangerMonth,
            parkCode: this.detailParkCode,
            limit: this.limit,
            page: this.page,
            potentialLevel: this.dangerType,
            potentialStatus: this.detailPotentialStatus
          }
        ).then(({ data: res }) => {
          if (res.code === 0) {
            this.gridData = res.data.data.data.map(item => {
              return {
                potentialName: item.potentialName,
                createdAt: item.createTime,
                nameAbbreviation: item.name,
                potentialStatus: item.potentialStatus === 0 ? '未整改' : item.potentialStatus === 1 ? '已整改' : item.potentialStatus === 2 ? '已验收' : '',
                potentialLevel: item.potentialLevel === 0 ? '重大隐患' : item.potentialLevel === 1 ? '较大隐患' : item.potentialLevel === 2 ? '严重隐患' : item.potentialLevel === 3 ? '一般隐患' : ''
              }
            })
            this.total = Number(res.data.data.count)
          }
        })
      } else if (this.detailPartType === 'alarmRanking') {
        this.$http.post(`/home/chemical/parkInfo/getAlarmRankingDetailByDate`,
          {
            year: '',
            yearMonth: this.alarmMonth,
            parkCode: this.detailParkCode,
            limit: this.limit,
            page: this.page
          }
        ).then(({ data: res }) => {
          if (res.code === 0) {
            this.gridData = res.data.data.data
            this.total = Number(res.data.data.count)
          }
        })
      } else if (this.detailPartType === 'emergencyJob') {
        this.$http.post(`/home/chemical/parkInfo/getEmergencyJobDetailByDate`,
          {
            year: '',
            yearMonth: this.jobMonth,
            parkCode: this.detailParkCode,
            limit: this.limit,
            page: this.page
          }
        ).then(({ data: res }) => {
          if (res.code === 0) {
            this.gridData = res.data.data.data.map(item => {
              return {
                jobName: item.jobName,
                createdAt: item.createTime,
                nameAbbreviation: item.nameAbbreviation,
                dangerLevel: item.dangerLevel === 0 ? '特级作业' : item.dangerLevel === 1 ? '⼀级作业' : item.dangerLevel === 2 ? '⼆级作业' : '',
                entName: item.entName
              }
            })
            this.total = Number(res.data.data.count)
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.securitybottom {
  .safePersonCount {
    height: 460px;
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }
  .safePersonCount_title {
    padding: 20px;
    text-align: center;
  }
  .title_sty{
    font-size: 18px;
    font-weight: 700;
    color: #333333;
  }
  .warnControll {
    height: 460px;
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }
  .warnControll_charts {
    width: 100%;
    padding: 0px 40px 10px 40px;
  }
}
.majorHazardAnalysis_charts{
  width: 100%;
  padding: 20px 0px 20px 0px;
}
.subject{
  width: 100%;
  .tab{
    display: flex;
    justify-content:flex-start;
    margin-top: 20px;
    .Unit{
      padding: 0 40px;
      width: 48%;
      background: #FFFFFF;
      border: 1px solid #F0F0F0;
      box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.03);
      margin-left: 1.4%;
      padding-bottom: 20px;
    }
    .matchingCompany{
      padding: 0 12px;
      width: 48%;
      background: #FFFFFF;
      border: 1px solid #F0F0F0;
      box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.03);
    }
  }
}
.Unit-title{
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    padding: 20px;
    color: #333333;
}
.select{
    width: 110px;
    margin-top: 15px;
    margin-left: 40px;
}
.pagination{
    margin-top:20px;
    margin-left:40%;
}
.primaryButton {
  color: #FFFFFF;
  background-color: #1492ff;
  border-color: #1492ff;
}
/deep/ .el-dialog__title {
  font-weight: 700;
  font-size: 16px;
}
/deep/ .el-dialog__footer {
  text-align: center;
}
.el-col-19 {
  margin-top: 4px;
}
</style>
